<template>
  <div>
    <div class="h-full">
      <n-card title="系统监控" :bordered="false" class="rounded-16px shadow-sm">

        <n-grid :cols="4" :x-gap="24">
          <n-gi>
            <n-card title="CPU使用情况" hoverable class="flex flex-col items-center">
              <n-progress
                type="circle"
                :percentage="cpuInfo.usagePercent"
                :indicator-placement="'inside'"
              />
              <n-space vertical class="mt-4 ">
                <n-text>核心数: {{ cpuInfo.cores }}</n-text>
                <n-text>型号: {{ cpuInfo.modelName }}</n-text>
                <n-text>使用率: {{ cpuInfo.usagePercent }}%</n-text>
              </n-space>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card title="内存使用情况" hoverable class="flex flex-col items-center">
              <n-progress
                type="circle"
                :percentage="memoryInfo.usagePercent"
                :indicator-placement="'inside'"
              />
              <n-space vertical class="mt-4">
                <n-text>总内存: {{ formatBytes(memoryInfo.total) }}</n-text>
                <n-text>已用内存: {{ formatBytes(memoryInfo.used) }}</n-text>
                <n-text>可用内存: {{ formatBytes(memoryInfo.available) }}</n-text>
                <n-text>使用率: {{ memoryInfo.usagePercent }}%</n-text>
              </n-space>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card title="磁盘使用情况" hoverable class="flex flex-col items-center">
              <n-progress
                type="circle"
                :percentage="diskInfo.usagePercent"
                :indicator-placement="'inside'"
              />
              <n-space vertical class="mt-4">
                <n-text>总空间: {{ formatBytes(diskInfo.total) }}</n-text>
                <n-text>已用空间: {{ formatBytes(diskInfo.used) }}</n-text>
                <n-text>可用空间: {{ formatBytes(diskInfo.free) }}</n-text>
                <n-text>使用率: {{ diskInfo.usagePercent }}%</n-text>
              </n-space>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card title="GPU使用情况" hoverable class="flex flex-col items-center">
              <n-progress
                type="circle"
                :percentage="gpuInfo.utilization"
                :indicator-placement="'inside'"
              />
              <n-space vertical class="mt-4">
                <n-text>名称: {{ gpuInfo.name }}</n-text>
                <n-text>总显存: {{ formatBytes(gpuInfo.memoryTotal) }}</n-text>
                <n-text>已用显存: {{ formatBytes(gpuInfo.memoryUsed) }}</n-text>
                <n-text>使用率: {{ gpuInfo.utilization }}%</n-text>
              </n-space>
            </n-card>
          </n-gi>
        </n-grid>
        <n-card title="网络监控" hoverable class="mt-4">
          <n-grid :cols="2" :x-gap="24">
            <n-gi>
              <n-card title="网络上传" hoverable class="flex flex-col items-center">
                <n-progress
                  type="circle"
                  :percentage="Math.min(networkInfo.up_speed / 10000000 * 100, 100)"
                  :indicator-placement="'inside'"
                />
                <n-space vertical class="mt-4">
                  <n-text>上传速度: {{ formatBytes(networkInfo.up_speed) }}/s</n-text>
                  <n-text>上传总量: {{ formatBytes(networkInfo.up) }}</n-text>
                  <n-text>使用占比: {{ formatBytes(networkInfo.used_percent) }}%</n-text>
                </n-space>
              </n-card>
            </n-gi>
            <n-gi>
              <n-card title="网络下载" hoverable class="flex flex-col items-center">
                <n-progress
                  type="circle"
                  :percentage="Math.min(networkInfo.down_speed / 10000000 * 100, 100)"
                  :indicator-placement="'inside'"
                />
                <n-space vertical class="mt-4">
                  <n-text>下载速度: {{ formatBytes(networkInfo.down_speed) }}/s</n-text>
                  <n-text>下载总量: {{ formatBytes(networkInfo.down) }}</n-text>
                  <n-text>使用占比: {{ formatBytes(networkInfo.used_percent) }}%</n-text>
                </n-space>
              </n-card>
            </n-gi>
          </n-grid>
        </n-card>
      </n-card>
    </div>
  </div>
</template>


<style lang="less" scoped>
.n-card {
  margin-bottom: 16px;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border: 1px solid #e9ecef;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.n-progress {
  &-circle {
    margin: 0 auto;
    width: 120px;
    height: 120px;
  }
}

.n-space {
  padding: 0 12px;
}

.n-text {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

.n-card__header {
  font-size: 16px;
  font-weight: 600;
  color: #343a40;
  padding: 16px 16px 0;
}
</style>

<script lang="ts" setup>
import {ref, onMounted} from 'vue';
import {
  getSystemUsage,
} from '@/api/dashboard/monitor';


// 初始化数据
const cpuInfo = ref({
  usagePercent: 0,
  cores: 0,
  modelName: ''
});

const memoryInfo = ref({
  total: 0,
  available: 0,
  used: 0,
  usagePercent: 0
});

const diskInfo = ref({
  total: 0,
  free: 0,
  used: 0,
  available: 0
});

const gpuInfo = ref({
  index: 0,
  name: '',
  memoryTotal: 0,
  memoryUsed: 0,
  utilization: 0
});

const networkInfo = ref({
  up: 0,
  down: 0,
  up_speed:   0,
  down_speed: 0,
  used_percent: 0,
});

// 格式化字节显示
function formatBytes(bytes: number, decimals = 2) {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
}

// 获取系统使用数据
async function fetchSystemUsage() {
  try {
    const  {cpu,gpu,disk,memory,network} = await getSystemUsage();

    // 更新CPU信息
    cpuInfo.value = {
      usagePercent: parseFloat(cpu.usage_percent.toFixed(2)),
      cores: cpu.cores,
      modelName: cpu.model_name
    };
    // 更新内存信息
    memoryInfo.value = {
      total: memory.total,
      available: memory.available,
      used: memory.used,
      usagePercent: parseFloat(memory.usage_percent.toFixed(2)),
    };
    // 更新磁盘信息
    diskInfo.value = {
      total: disk.total,
      free: disk.free,
      used: disk.used,
      available: disk.available
    };
    // 更新GPU信息
    if (gpu && gpu.length > 0) {
      gpuInfo.value = {
        index: gpu[0].index,
        name: gpu[0].name,
        memoryTotal: gpu[0].memory_total,
        memoryUsed: parseFloat(gpu[0].memory_used.toFixed(2)),
        utilization: gpu[0].utilization
      }
    }

    // 更新网络信息
    networkInfo.value = {
      up_speed: network.up_speed,
      down_speed: network.down_speed,
      up: network.up,
      down: network.down,
      used_percent: network.used_percent,
    };

    // ... 其他更新逻辑保持不变 ...
  } catch (error) {
    // message.error('获取系统使用数据失败');
  }
}

// 定时更新数据
onMounted(() => {
  fetchSystemUsage();
  setInterval(fetchSystemUsage, 3000);
});


</script>

<style lang="less" scoped>
.n-card {
  margin-bottom: 16px;
}
</style>
